<!DOCTYPE html>
<html lang="zh-CN" class="dark">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>X-Brain Agent - 智能对话</title>
    <link rel="stylesheet" href="css/dark-theme.css">
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet">
</head>
<body class="bg-gray-900 text-gray-100">
    <!-- Sidebar -->
    <div class="fixed inset-y-0 left-0 w-64 bg-gray-800 shadow-lg">
        <div class="flex items-center justify-center h-16 bg-gray-700">
            <h1 class="text-xl font-bold">X-Brain Agent</h1>
        </div>
        <nav class="mt-4">
            <a href="index.html" class="flex items-center px-6 py-3 text-gray-300 hover:bg-gray-700">
                <i class="fas fa-home mr-3"></i>
                仪表盘
            </a>
            <a href="knowledge-base.html" class="flex items-center px-6 py-3 text-gray-300 hover:bg-gray-700">
                <i class="fas fa-book mr-3"></i>
                知识库
            </a>
            <a href="chat.html" class="flex items-center px-6 py-3 bg-gray-700 text-white">
                <i class="fas fa-comments mr-3"></i>
                智能对话
            </a>
            <a href="search.html" class="flex items-center px-6 py-3 text-gray-300 hover:bg-gray-700">
                <i class="fas fa-search mr-3"></i>
                语义搜索
            </a>
            <a href="agent.html" class="flex items-center px-6 py-3 text-gray-300 hover:bg-gray-700">
                <i class="fas fa-robot mr-3"></i>
                智能代理
            </a>
            <a href="file-manager.html" class="flex items-center px-6 py-3 text-gray-300 hover:bg-gray-700">
                <i class="fas fa-folder mr-3"></i>
                文件管理
            </a>
            <a href="#" class="flex items-center px-6 py-3 text-gray-300 hover:bg-gray-700">
                <i class="fas fa-cog mr-3"></i>
                系统设置
            </a>
        </nav>
    </div>

    <!-- Main Content -->
    <div class="ml-64 flex flex-col h-screen">
        <!-- Header -->
        <header class="bg-gray-800 p-4 shadow-lg">
            <div class="flex justify-between items-center">
                <div>
                    <h2 class="text-2xl font-bold">智能对话</h2>
                    <p class="text-gray-400">与您的知识库进行智能对话</p>
                </div>
                <div class="flex items-center space-x-4">
                    <button class="bg-gray-700 hover:bg-gray-600 px-4 py-2 rounded-lg flex items-center">
                        <i class="fas fa-history mr-2"></i>
                        历史记录
                    </button>
                    <button class="bg-blue-600 hover:bg-blue-700 px-4 py-2 rounded-lg flex items-center">
                        <i class="fas fa-plus mr-2"></i>
                        新建对话
                    </button>
                </div>
            </div>
        </header>

        <!-- Chat Container -->
        <div class="bg-gray-800 rounded-lg shadow-lg flex h-[calc(100vh-12rem)]">
            <!-- Chat List -->
            <div class="w-64 border-r border-gray-700">
                <!-- Search -->
                <div class="p-4 border-b border-gray-700">
                    <div class="relative">
                        <input type="text" placeholder="搜索对话..."
                               class="w-full bg-gray-700 text-gray-100 px-4 py-2 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500">
                        <i class="fas fa-search absolute right-3 top-3 text-gray-400"></i>
                    </div>
                </div>
                <!-- Chat List Items -->
                <div class="overflow-y-auto h-full">
                    <div class="p-4 border-b border-gray-700 hover:bg-gray-700 cursor-pointer">
                        <h4 class="font-medium">产品问答</h4>
                        <p class="text-sm text-gray-400 truncate">最近更新: 10分钟前</p>
                    </div>
                    <div class="p-4 border-b border-gray-700 hover:bg-gray-700 cursor-pointer bg-gray-700">
                        <h4 class="font-medium">技术支持</h4>
                        <p class="text-sm text-gray-400 truncate">最近更新: 1小时前</p>
                    </div>
                    <div class="p-4 border-b border-gray-700 hover:bg-gray-700 cursor-pointer">
                        <h4 class="font-medium">功能咨询</h4>
                        <p class="text-sm text-gray-400 truncate">最近更新: 2小时前</p>
                    </div>
                </div>
            </div>

            <!-- Chat Area -->
            <div class="flex-1 flex flex-col">
                <!-- Chat Header -->
                <div class="p-4 border-b border-gray-700 flex justify-between items-center">
                    <div>
                        <h3 class="font-medium">技术支持</h3>
                        <p class="text-sm text-gray-400">与技术支持知识库对话</p>
                    </div>
                    <div class="flex space-x-2">
                        <button class="text-gray-400 hover:text-white">
                            <i class="fas fa-share"></i>
                        </button>
                        <button class="text-gray-400 hover:text-white">
                            <i class="fas fa-ellipsis-v"></i>
                        </button>
                    </div>
                </div>

                <!-- Messages -->
                <div class="flex-1 overflow-y-auto p-4 space-y-4">
                    <!-- User Message -->
                    <div class="flex items-start justify-end">
                        <div class="bg-blue-600 text-white rounded-lg p-3 max-w-lg">
                            <p>如何配置知识库索引？</p>
                        </div>
                    </div>

                    <!-- Assistant Message -->
                    <div class="flex items-start">
                        <div class="w-8 h-8 rounded-full bg-gray-600 flex items-center justify-center mr-2">
                            <i class="fas fa-robot"></i>
                        </div>
                        <div class="bg-gray-700 rounded-lg p-3 max-w-lg">
                            <p>要配置知识库索引，请按照以下步骤操作：</p>
                            <ol class="list-decimal list-inside mt-2 space-y-1">
                                <li>进入知识库管理页面</li>
                                <li>选择目标知识库</li>
                                <li>点击"索引设置"</li>
                                <li>选择索引类型和参数</li>
                                <li>点击"保存并构建索引"</li>
                            </ol>
                            <p class="mt-2">如果您需要更详细的说明，我可以为您提供具体文档。</p>
                        </div>
                    </div>

                    <!-- User Message -->
                    <div class="flex items-start justify-end">
                        <div class="bg-blue-600 text-white rounded-lg p-3 max-w-lg">
                            <p>请提供相关文档链接</p>
                        </div>
                    </div>

                    <!-- Assistant Message -->
                    <div class="flex items-start">
                        <div class="w-8 h-8 rounded-full bg-gray-600 flex items-center justify-center mr-2">
                            <i class="fas fa-robot"></i>
                        </div>
                        <div class="bg-gray-700 rounded-lg p-3 max-w-lg">
                            <p>您可以在以下位置找到详细文档：</p>
                            <div class="mt-2 space-y-2">
                                <a href="#" class="text-blue-400 hover:text-blue-300 flex items-center">
                                    <i class="fas fa-file-alt mr-2"></i>
                                    知识库索引配置指南
                                </a>
                                <a href="#" class="text-blue-400 hover:text-blue-300 flex items-center">
                                    <i class="fas fa-video mr-2"></i>
                                    视频教程：如何优化索引性能
                                </a>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Input Area -->
                <div class="p-4 border-t border-gray-700">
                    <div class="flex items-end space-x-4">
                        <div class="flex-1 bg-gray-700 rounded-lg p-2">
                            <textarea placeholder="输入您的问题..." rows="3"
                                      class="w-full bg-transparent text-gray-100 resize-none focus:outline-none"></textarea>
                            <div class="flex justify-between items-center mt-2">
                                <div class="flex space-x-2">
                                    <button class="text-gray-400 hover:text-white">
                                        <i class="fas fa-paperclip"></i>
                                    </button>
                                    <button class="text-gray-400 hover:text-white">
                                        <i class="fas fa-image"></i>
                                    </button>
                                </div>
                                <div class="text-sm text-gray-400">
                                    按 Enter 发送，Shift + Enter 换行
                                </div>
                            </div>
                        </div>
                        <button class="bg-blue-600 hover:bg-blue-700 px-6 py-3 rounded-lg">
                            <i class="fas fa-paper-plane"></i>
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <script src="js/main.js"></script>
</body>
</html>
